<template>
	<div>
		<!-- 面包屑 -->
		<el-breadcrumb>
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商铺</el-breadcrumb-item>
			<el-breadcrumb-item>商铺信息</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row :gutter="25">
			<el-button type="primary" @click="addDialogVisible=true">添加商铺</el-button>
			<el-dialog title="添加商铺" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
				<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
					<el-form-item label="商铺ID" prop="shopID">
						<el-input v-model="addForm.shopID"></el-input>
					</el-form-item>
					<el-form-item label="商铺名" prop="shopname">
						<el-input v-model="addForm.shopname"></el-input>
					</el-form-item>
					<el-form-item label="商铺地址" prop="shopaddress">
						<el-input v-model="addForm.shopaddress"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addShop">确 定</el-button>
				</span>
			</el-dialog>
		</el-row>

		<el-card>
			<el-table stripe border :data="shopList.filter(data => !search || data.shopname.toLowerCase().includes(search.toLowerCase()))"
			 style="margin-bottom: 10px;">
				<el-table-column label="商铺ID" prop="shopID">
				</el-table-column>
				<el-table-column label="商铺名称" prop="shopname">
				</el-table-column>
				<el-table-column label="商铺地址" prop="shopaddress">
				</el-table-column>
				<el-table-column align="right">
					<!-- 搜索区 -->
					<template slot="header" slot-scope="scope">
						<el-input clearable v-model="search" size="mini" placeholder="输入商铺名搜索" />
					</template>
					<!-- 数据按钮区 -->
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-tooltip class="item" effect="dark" content="修改用户" placement="top" :enterable="false">
							<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
						</el-tooltip>
						<!-- 删除按钮 -->
						<el-tooltip class="item" effect="dark" content="删除用户" placement="top" :enterable="false">
							<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteShopList(scope.row.shopID)"></el-button>
						</el-tooltip>
					</template>

				</el-table-column>
				<!--商铺展示区-->
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<!-- 数据按钮区 -->
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row.shopID)" type="text" size="small">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			</el-table>
			<!--分页区-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum"
			 :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">

				<el-form-item label="商铺ID" prop="shopID">
					<el-input v-model="editForm.shopID"></el-input>
				</el-form-item>
				<el-form-item label="商铺名" prop="shopname">
					<el-input v-model="editForm.shopname"></el-input>
				</el-form-item>
				<el-form-item label="商铺地址" prop="shopaddress">
					<el-input v-model="editForm.shopaddress"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible= false">取 消</el-button>
				<el-button type="primary" @click="editUserinfo">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="查看信息" :visible.sync="DialogVisible" width="50%" @close="DialogClosed">
			<el-form :model="Form" :rules="FormRules" ref="FormRef" label-width="70px">

				<el-form-item label="商品" prop="businessname">
					<el-input v-model="Form.businessname"></el-input>
					<!-- <el-table-column label="商品" prop="businessname"> -->
					</el-table-column>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="DialogVisible = false">退出</el-button>
				<el-button type="primary" @click="Userinfo">进一步操作</el-button>
			</span>
		</el-dialog>
		</el-card>
		<!-- 社交 -->
	</div>


</template>

<script>
	export default {
		created() {
			this.getShopList();
			this.getShop();
		},
		data() {
			return {
				tableInfo: [{}],
				queryInfo: {
					query: '',
					//当前的页数
					pageNum: 1,
					//当前每页显示多少条数据
					pageSize: 2,
				},
				ShopList: [],
				shopList:[],
				total: 0,
				addDialogVisible: false,
				editDialogVisible: false,
				DialogVisible: false,
				search: '',
				ststus: 200,
				Form: {},
				FormRules: {},
				editForm: {},
				editFormRules: {
					shopID: [{
						required: true,
						message: "请输入商铺ID",
						trigger: 'blur'
					}],
					shopname: [{
						required: true,
						message: "请输入商铺名称",
						trigger: 'blur'
					}],
					shopaddress: [{
						required: true,
						message: "请输入商铺地址",
						trigger: 'blur'
					}]
				},
				//添加部分的审查
				addForm: {
					shopname: '',
					shopID: '',
					shopaddress: '',
				},
				addFormRules: {
					shopID: [{
						required: true,
						message: "请输入商铺ID",
						trigger: 'blur'
					}, ],
					shopname: [{
						required: true,
						message: "请输入商铺名称",
						trigger: 'blur'
					}, ],
					shopaddress: [{
						required: true,
						message: "请输入商铺地址",
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			async handleClick(shopID) {
				//console.log(shopID);
				this.DialogVisible = true
			},
			DialogClosed() {
				this.$refs.FormRef.resetFields();
			},
			Userinfo() {
				this.$refs.FormRef.validate(async valid => {
					//console.log(valid)
					if (!valid) return;
					const {
						data: res
					} = this.$http.put(this.Form);
					if (res != "success") {
						return this.$message.error("操作失败！");
						this.$message.success("操作成功！");
						this.DialogVisible = false;
						this.getShopList();
					}
				})
			},
			//①获取
			async getShopList() {
				const {
					data: resString
				} = await this.$http.get("shop",{params:this.queryInfo}) //你这里发送请求url是shop？ //接收后台返回的String数据，访问后台""里面的东西是路径
				var res = JSON.parse(resString); //从字符串中解析resString对象
				//var res1 = JSON.parse(resString1);
				//console.log(resString); //在控制台输出信息
				//console.log(res.numbers);
				//console.log(res);//在控制台输出信息
				//console.log(res.shop);
				this.ShopList = res.shop;
				this.total=res.numbers;
				//打印
			},
			 async getShop() {
				const {
						data: resString
					} = await this.$http.get("getShop", {
						params: this.queryInfo
					});
					var res = JSON.parse(resString); //json转换为js对象
					//console.log(res.data)
					this.shopList = res.data; //data和后端res.put("data", Students)保持一致
					this.total = res.numbers; //numbers和后端res.put("numbers", numbers)保持一致
				},
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			}, 
			//添加部分的实现
			addShop() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return this.$message.error('请填写必要项')
					//拷贝this.addForm
					console.log(this.addForm)
					//const form = _.clone(this.addForm)
					//form.sort = form.sort.join(',')
					// 发起请求添加商品
					// 商品名称必须是唯一的
					const {
						data: res
					} = await this.$http.post('addshop', this.addForm)
					//console.log(form)
					this.addDialogVisible = false
					this.$message.success('添加商铺成功') //笑死，写成"添加用户成功"了

					this.getShopList() //调用get函数
				})
			},
			handleSizeChange(newSize) { //监听 pagesize 改变的事件
				console.log("页码", newSize); //控制台打印：选择不同size的变s化
				this.queryInfo.pageSize = newSize; //将选择的不同的size重新赋值给pageSize
				this.getShop(); //让它带着新的数据去查询
			},

			handleCurrentChange(newPage) { //监听页码值改变的事件
				console.log("页码", newPage);
				this.queryInfo.pageNum = newPage;
				this.getShop();
			},
			/* showEditDialog(){
				this.editDialogVisible=true
			}, */
			async showEditDialog(id) {
				/* const{data:res}=await this.$http.get("getUpdateShop?shopID="+shopID);
				 this.editForm=res; */
				this.editDialogVisible = true
				const {
					data: res
				} = await this.$http.get("getUpdateShop?id=" + id);
				console.log(id)
				this.editForm = JSON.parse(res);
			},

			//修改用户信息并提交
			editUserinfo() {
				this.$refs.editFormRef.validate(async valid => {
					// var_this=this;
					if (valid) {
						const {
							data: res
						} = await this.$http.put('editShop', this.editForm); //发送请求

						if (JSON.parse(res).flag != "success") return this.$notify.error({
							title: '编辑请求提示',
							message: '编辑失败'
						});
                        this.getShopList()
						const h = this.$createElement; //使用这个可以定制message
						this.$notify({
							type: 'success',
							duration: 3000,
							title: '编辑请求提示',
							message: h('i', {
								style: 'color: teal'
							}, '编辑成功'),
						});

						this.editDialogVisible = false;


					} else {
						this.$notify.error({
							title: '校验提示', //标题
							message: '数据校验不符，请检查',
						});
					}
					
				})
			},
			//监听修改对话框的关闭事件
			editDialogClosed() {
				this.$refs.editFormRef.resetFields();
			},
			//删除部分的实现
			async deleteShopList(shopID) {
				//console.log(shopID);
				const confirmResult = await this.$confirm('此操作将永久删除该商铺, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (confirmResult != 'confirm') {
					return this.$message.info('已取消删除')

				}

				const {
					data: res
				} = await this.$http.delete("deleteShopID?shopID=" + shopID)
				//console.log(res);
				if (res != "success") {
					return this.$message.error("删除失败！");
				}
				this.$message.success("删除成功！！！");
				this.getShopList()
			},
		}
	}
</script>
<style lang="less" scoped>
	.el-breadcrumb {
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		font-size: 17px;
		font-weight: 700;
	}


	.el-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
		margin: 10px;
	}
</style>
